///饼图
<template>
    <!-- 设置 div 的宽高，确保图表有空间渲染 -->
    <!-- <div ref="chart" :style="{ height: chartHeight + 'px', width: chartWidth + 'px' }"> </div> -->
    <div ref="chart" :style="widthAndHeightStyle"> </div>
    <!-- <span>{{chartHeight}}</span><span>{{receivedProps.chartHeight}}</span> -->
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

let widthAndHeightStyle = ref('height:200px;width:200px');
let chartHeight = ref(200); // 默认高度
let chartWidth = ref(200); // 默认宽度
let receivedProps = defineProps<{
    chartHeight: number;
    chartWidth: number;
}>();
if (receivedProps.chartHeight) {
    chartHeight.value = receivedProps.chartHeight;
}
if (receivedProps.chartWidth) {
    chartWidth.value = receivedProps.chartWidth;
}
widthAndHeightStyle.value = "height:" + chartHeight.value + "px;width:" + chartWidth.value + "px";

const chart = ref(null);

/* 初始化图表 */
function initChart() {
    let myChart = echarts.init(chart.value);
    const option = {
        title: {
            // text: '项目进度总览',
            // subtext: 'Fake Data',
            // left: 'center',
            // bottom:'bottom'
        },
        tooltip: {
            trigger: 'item',
            formatter: (params) => {
                // 根据状态返回自定义内容
                const projectMap = {
                    '迟缓': '项目1, 项目2',
                    '正常': '项目3, 项目4',
                    '超前': '项目5'
                };

                const state = params.name; // 获取状态名称
                const projects = projectMap[state] || '无'; // 获取对应项目

                return `${state}: ${projects}`;
            }
        },
        legend: {
            orient: 'vertical',
            // left: 'left',
            // top: 'top'
            // right: 'right',
            bottom: 'bottom'
        },
        series: [
            {
                type: 'pie',
                radius: '70%',
                data: [
                    { value: 2, name: '迟缓', itemStyle: { color: '#ff9999' } }, // 迟缓 - 红色
                    { value: 2, name: '正常', itemStyle: { color: '#99ff99' } }, // 正常 - 绿色
                    { value: 1, name: '超前', itemStyle: { color: '#9999ff' } }  // 超前 - 蓝色
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
}

onMounted(() => {
    initChart();
});
</script>